<template>
  <HeaderBar />
  <div class="outer-warp">
    <UserInfo
      :userInfo="userInfo"
      :uid="uid"
      @update:userInfo="userInfo = $event"
    />
    <div class="max-w-5xl mx-auto">
      <router-view :uid="uid" :isSelf="userInfo?.isSelf"></router-view>
    </div>
  </div>
</template>

<script setup>
import HeaderBar from '@/components/common/Headerbar.vue'
import UserInfo from './components/UserInfo.vue'
import api from '@/api/api'

const route = useRoute()
const uid = ref(route.params.id)

onMounted(() => {
  init()
})

const userInfo = ref(null)

watch(
  () => route.params,
  () => {
    init()
  }
)

const init = () => {
  uid.value = route.params.id
  api.User.getProfile({ id: uid.value }).then((res) => {
    userInfo.value = res.data
  })
}
</script>

<style scoped>
.outer-warp {
  background-color: #f4f4f4;
  min-height: calc(100vh - 73px);
  overflow: auto;
}
</style>
